import React, { useState, Suspense, useEffect } from 'react';
import { Canvas } from '@react-three/fiber';
import { FirstPersonControls } from './FirstPersonControls';
import { UIControlPanel, GameInstructions, Crosshair } from './UIControlPanel';
import { CoffeeScene } from './scenes/CoffeeScene';
import { ParkScene } from './scenes/ParkScene';
import { RestaurantScene } from './scenes/RestaurantScene';
import { LibraryScene } from './scenes/LibraryScene';
import { ProfileCard } from './ProfileCard';
import { ErrorBoundary } from './ErrorBoundary';
import { mockProfiles } from '../data/mockData';
import type { DatingProfile } from '../types';

type SceneType = 'coffee' | 'park' | 'restaurant' | 'library';

export const DatingApp: React.FC = () => {
  const [currentScene, setCurrentScene] = useState<SceneType>('coffee');
  const [selectedProfile, setSelectedProfile] = useState<DatingProfile | null>(null);
  const [showProfileCard, setShowProfileCard] = useState(false);
  const [showInstructions, setShowInstructions] = useState(true);

  const handleProfileClick = (profile: DatingProfile) => {
    console.log('Profile clicked in DatingApp:', profile.name);
    setSelectedProfile(profile);
    setShowProfileCard(true);
  };

  const handleCloseProfile = () => {
    setShowProfileCard(false);
    setTimeout(() => setSelectedProfile(null), 500);
  };

  // ESC键关闭资料卡片
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.code === 'Escape' && showProfileCard) {
        handleCloseProfile();
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [showProfileCard]);

  const renderScene = () => {
    const sceneProps = {
      profiles: mockProfiles,
      onProfileClick: handleProfileClick
    };

    switch (currentScene) {
      case 'coffee':
        return <CoffeeScene {...sceneProps} />;
      case 'park':
        return <ParkScene {...sceneProps} />;
      case 'restaurant':
        return <RestaurantScene {...sceneProps} />;
      case 'library':
        return <LibraryScene {...sceneProps} />;
      default:
        return <CoffeeScene {...sceneProps} />;
    }
  };

  return (
    <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
      <ErrorBoundary>
        {/* 3D Canvas */}
        <Canvas
          camera={{ 
            position: [0, 1.7, 5], 
            fov: 75,
            near: 0.1,
            far: 1000
          }}
          style={{ background: 'linear-gradient(180deg, #87CEEB 0%, #E6F3FF 100%)' }}
          shadows
        >
          <Suspense fallback={null}>
            {/* Optimized Lighting */}
            <ambientLight intensity={0.4} />
            <directionalLight 
              position={[10, 15, 5]} 
              intensity={1.0} 
              castShadow
              shadow-mapSize={[1024, 1024]}
              shadow-camera-far={40}
              shadow-camera-left={-25}
              shadow-camera-right={25}
              shadow-camera-top={25}
              shadow-camera-bottom={-25}
            />
            
            {/* First Person Controls - Fixed Height */}
            <FirstPersonControls 
              enabled={true} 
              walkSpeed={6}
              runSpeed={12}
              boundaryRadius={18}
              fixedHeight={1.7}
            />
            
            {/* Scene Content */}
            {renderScene()}
          </Suspense>
        </Canvas>
      </ErrorBoundary>

      {/* Crosshair */}
      <Crosshair />
      
      {/* Game Instructions */}
      <GameInstructions visible={showInstructions} />

      {/* Unified Control Panel */}
      <UIControlPanel
        currentScene={currentScene}
        onSceneChange={setCurrentScene}
        showInstructions={showInstructions}
        onToggleInstructions={() => setShowInstructions(!showInstructions)}
      />

      {/* Profile Card */}
      {selectedProfile && (
        <ProfileCard
          profile={selectedProfile}
          isVisible={showProfileCard}
          onClose={handleCloseProfile}
        />
      )}
    </div>
  );
};